<template>
  <div class="q-pa-md">
    <q-tab-panels
      v-model="tab"
      animated
      style="height: calc(100vh - 130px)"
      :class="ui.cardClass"
    >
      <q-tab-panel
        name="download"
        class="full-height full-width relative-position"
      >
        <div class="absolute-center q-gutter-y-lg">
          <div class="text-h6">{{ $t("BagUploading.选择时间段生成文件") }}</div>
          <time-date-picker
            outlined
            :label="$t('BagUploading.开始时间')"
            v-model="bag.start_time"
            style="min-width: 18rem"
            isSeconds
            :dark="ui.isDark"
          />
          <time-date-picker
            outlined
            :label="$t('BagUploading.结束时间')"
            v-model="bag.end_time"
            style="min-width: 18rem"
            isSeconds
            :dark="ui.isDark"
          />
          <q-input
            outlined
            label="问题描述"
            v-model="bag.problem"
            style="min-width: 18rem"
            :dark="ui.isDark"
          />
          <q-btn
            no-caps
            :label="$t('BagUploading.生成文件')"
            color="primary"
            style="min-width: 18rem"
            icon="archive"
            @click="download"
            :class="ui.btnClass"
          />
        </div>
      </q-tab-panel>

      <q-tab-panel
        name="uploading"
        class="full-height full-width relative-position"
      >
        <div class="absolute-center q-gutter-y-lg" style="min-width: 18rem">
          <div class="text-h6">{{ $t("BagUploading.选择文件上传服务器") }}</div>
          <q-select
            :label="$t('BagUploading.文件选择')"
            outlined
            :options="bagList"
            v-model="bagUrl"
            style="overflow: hidden; text-overflow: ellipsis; width: 100%"
            :dark="ui.isDark"
          >
            <template v-slot:after>
              <q-btn icon="refresh" flat @click="getBag" />
            </template>
          </q-select>
          <q-btn
            no-caps
            :label="$t('BagUploading.上传文件')"
            color="secondary"
            style="width: 100%"
            icon="unarchive"
            @click="uploading"
            :class="ui.btnClass"
          />
        </div>
        <q-inner-loading
          :showing="loading"
          :label="$t('BagUploading.上传中') + '...'"
          label-class="text-teal"
          label-style="font-size: 1.1em"
        />
      </q-tab-panel>
    </q-tab-panels>
    <q-separator dark />
    <q-tabs
      v-model="tab"
      inline-label
      :class="ui.isDark ? 'bg-grey-9 text-white' : 'bg-grey-3'"
    >
      <q-tab
        no-caps
        name="download"
        icon="receipt"
        :label="$t('BagUploading.生成文件')"
      />
      <q-tab
        no-caps
        name="uploading"
        icon="unarchive"
        :label="$t('BagUploading.上传文件')"
      />
    </q-tabs>
  </div>
</template>
<script setup>
import TimeDatePicker from "components/animations/TimeDatePicker.vue";
import { ref, onMounted } from "vue";
import { api } from "boot/axios";
import { useAPIStore } from "stores/api";
import { useQuasar } from "quasar";
import { useUiStore } from "stores/ui";
import { useI18n } from "vue-i18n";

const $t = useI18n().t;
const ui = useUiStore();
const $q = useQuasar();
const loading = ref(false);
const tab = ref("download");
// 包下载地址
const bag = ref({
  start_time: null,
  end_time: null,
  problem: "",
});
//  包名称列表
const bagList = ref([]);
// 包名称
const bagUrl = ref("");

onMounted(() => {
  getBag();
});

// 下载文件
function download() {
  if (!bag.value.start_time)
    return $q.notify({
      message: $t("BagUploading.开始时间不得为空"),
      type: "negative",
    });
  if (!bag.value.end_time)
    return $q.notify({
      message: $t("BagUploading.结束时间不得为空"),
      type: "negative",
    });
  api
    .post(useAPIStore().amrUrl + "ros/call", bag.value, {
      params: { service: "/compress_file" },
    })
    .then((rs) => {
      // 判断返回值是否为字符串
      if (rs.data.values.constructor === String) {
        $q.notify({
          message: $t("BagUploading.生成本地文件失败"),
          type: "negative",
        });
      } else {
        $q.notify({
          message: $t("BagUploading.生成本地文件成功"),
          type: "positive",
        });
        getBag();
      }
    })
    .catch(() => {
      $q.notify({ message: $t("BagUploading.请求接口异常"), type: "negative" });
    });
}
// 上传文件
function uploading() {
  loading.value = true;
  api
    .post(useAPIStore().amrUrl + "ros/call", [bagUrl.value], {
      params: { service: "/upload" },
    })
    .then((rs) => {
      if (rs.data.values.success) {
        loading.value = false;
        $q.notify({
          message: bagUrl.value + $t("BagUploading.文件上传成功"),
          type: "positive",
        });
        bagUrl.value = "";
      } else {
        loading.value = false;
        $q.notify({
          message: $t("BagUploading.文件上传失败"),
          type: "negative",
        });
        console.log(rs.data.values);
      }
    })
    .catch((e) => {
      loading.value = false;
      $q.notify({ message: $t("BagUploading.文件上传失败"), type: "negative" });
      console.log(e);
    });
}
// 获取文件列表
function getBag() {
  api
    .post(useAPIStore().amrUrl + "ros/call", [], {
      params: { service: "/list" },
    })
    .then((rs) => {
      if (rs.data.values.constructor === String) {
        $q.notify({
          message: bagUrl.value + $t("BagUploading.文件列表获取失败"),
          type: "negative",
        });
      } else {
        $q.notify({
          message: bagUrl.value + $t("BagUploading.文件列表获取成功"),
          type: "positive",
        });
        bagList.value = rs.data.values.files_name;
      }
    })
    .catch(() => {
      $q.notify({ message: $t("BagUploading.请求接口异常"), type: "negative" });
    });
}
</script>
<style scoped></style>
